<template>
	<view class="container" >
		<wd-tabs v-model="tab">
		  <wd-tab title="分类">
		    <view class="content" v-for="item in 1" :key="item">
		      <view class="Grid">
		        <view class="Grid-Item" v-for="item in tableData" :key="item.id" @click="navigateToPage(item)">
		          <view class="GSname">
		            {{ item.name }}
		            <!-- <image :src="'http://localhost:9099' + item.appIcon" class="slot-img" />-->
		          </view>
		          <view class="GSnum">
		            <span class="blue">{{ item.count }}台</span>
		            <span class="left">
		              <uni-icons type="right" color="#00aaff" :size="20"></uni-icons>
		            </span>
		          </view>
		        </view>
		      </view>
		    </view>
		  </wd-tab>
		  <wd-tab title="概览">
		    <view class="content padding">
		      <view class="card">
		        <view class="card-title">当前设备统计</view>
		        <view class="charts">
		          <canvas v-if="canvasShow" ref="charts" class="charts" canvas-id="kVcPKZfPWVQunWGotlYtzpfyKNkIKkAy" id="kVcPKZfPWVQunWGotlYtzpfyKNkIKkAy" @touchend="tap" />
		        </view>
		      </view>
		    </view>
		  </wd-tab>
		</wd-tabs>
	</view>
</template>

<script>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons'
import uCharts from "../../node_modules/@qiun/ucharts/u-charts.js"
import request from '@/util/request';

var uChartsInstance = [];
export default {
  components: {
    uniIcons
  },
  data() {
    return {
      canvasShow: true,
      cWidth: 750,
      cHeight: 500,
      startX: 0,
      tab: 1,
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      // equipmentTotal: {
      // 	allTotal: '',
      // 	onlineTotal: '',
      // 	unlineTotal: ''
      // },
    }
  },
  onPullDownRefresh() {
    // 分类
    if (this.tab == 0) {
      this.pageNum = 1;
      this.pageSize = 20;
      this.load()
    } else {// 概况
      this.getServerData()
    }
    uni.stopPullDownRefresh();
  },
  //触底事件
  onReachBottom() {
    if (this.pageNum * this.pageSize >= this.total) {
      uni.showToast({
        title: '没有更多数据了',
        icon: 'none',
        duration: 1000
      });
    } else {
      uni.showLoading({
        title: '加载中'
      });
      this.pageSize += 10
      this.load()
      setTimeout(() => {
        uni.hideLoading()
      }, 500)
    }
  },
  mounted() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(680);
    //这里的 500 对应 css .charts 的 height
	this.cHeight = uni.upx2px(500)
    this.getServerData();
    this.load();
  },
  methods: {
    navigateToPage(item) {
      uni.navigateTo({
        url: '/pages/equipment/list?type=' + JSON.stringify(item),
      });
    },
    load() {
      let level = this.$store.state.userInfo.level;
      let organizationId = this.$store.state.userInfo.organization;
      let isAllClient = this.$store.state.userInfo.isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = this.$store.state.userInfo.clientIds;
      } else {
        clientIds = [];
      }
      request.get("/equipment-type/pageTotal?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&organizationId=" + organizationId +
        "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            if (key === "record") {
              this.tableData = res.data[key];
            } else if (key === "total") {
              this.total = res.data[key];
            }
          }
        }
      })
    },
    getServerData() {
      let level = this.$store.state.userInfo.level;
      let organizationId = this.$store.state.userInfo.organization;
      let isAllClient = this.$store.state.userInfo.isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = this.$store.state.userInfo.clientIds;
      } else {
        clientIds = [];
      }
      request.get("/equipment-input-store/findCountByOnline?level=" + level + "&organizationId=" + organizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
        if (res.code === '200') {
          this.equipmentTotal = res.data;
          let data = {
            series: [{
              data: [{
                "name": "在线",
                "value": this.equipmentTotal.onlineTotal
              }, {
                "name": "离线",
                "value": this.equipmentTotal.unlineTotal
              }]
            }]
          };
          this.drawCharts('kVcPKZfPWVQunWGotlYtzpfyKNkIKkAy', data);
        }
      });
    },
    drawCharts(id, data) {
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "ring",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        series: data.series,
        animation: true,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#34d399", "#EE6666", "#FAC858", "#73C0DE", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "top",
          lineHeight: 25
        },
        extra: {
          ring: {
            ringWidth: 50,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      });
    },
    tap(e) {
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
}
</script>

<style lang='scss' scoped>
:deep(.is-active){
	color: var(--blue-color);
}
:deep(.wd-tabs__nav){
	position: sticky;
	z-index: 90;
	top: 0;
}
:deep(.wd-tabs__line){
	width:20%;
	background: var(--blue-color);
}
.container {
  height: 100%;
}
.content {
	background-color: var(--bg-color);
}
.Grid {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx;
  column-gap: 4%;
  row-gap: 20rpx;
  box-sizing: border-box;
}

.Grid-Item {
  width: 41%;
  border-radius: 12rpx;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 20rpx;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Grid-Item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.GSname {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.GSnum {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

.charts {
  width: 100%;
  height: 300px;
}

.left {
  margin-left: 180rpx;
}

.blue {
  color: #00aaff;
}
</style>
